<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!--
    在前端中，用于收集用户数据时，都会通过表单标签进行实现，
    表单标签使用form标签表示，form标签的属性包括：
      action属性 用于设置表单提交时的地址，即将数据提交给哪个服务器进行处理
      method属性 用于设置表单的提交方式，get或post
      name属性 用于设置表单的名字
      target属性 用于设置表单提交后打开的窗口，_blank表示新窗口，_self表示当前窗口
      enctype属性 用于设置表单在提交时数据的编码方式，
          application/x-www-form-urlencoded表示默认的编码方式（传输纯文本时使用），
          multipart/form-data表示文件上传时的编码方式
-->
<form action="https://www.baidu.com" method="get">
    <!--在表单中真正用于用户输入数据的标签为input标签；
    input标签内可以收集用户输入的文本、密码、单选框、复选框、文件等数据；-->
    <!--input标签的属性包括：
        type属性 用于设置本输入框的类型；包括text文本框、password密码框、radio单选框
            checkbox 复选框、email邮件等
        name属性 用于设置本输入框的名字，用于在服务器端获取数据时使用；如果不设置name属性，
        那么在表单提交时就无法正常携带用户输入的数据
        value属性 用于设置输入框的值，即默认显示的值
    -->
    用户名：<input type="text" name="username" value="张三"> <br/>
    密码：<input type="password" name="password"> <br/>
    <!--单选框使用radio标签表示，单选框的name属性值必须相同，否则无法实现单选效果-->
    性别：<input type="radio" name="gender" value="男">男
    <input type="radio" name="gender" value="女">女
    <input type="radio" name="gender" value="未知">未知 <br/>
    爱好：<input type="checkbox" name="hobbies" value="篮球">篮球
    <input type="checkbox" name="hobbies" value="足球">足球
    <input type="checkbox" name="hobbies" value="羽毛球">羽毛球 <br/>
    生日：<input type="date" name="birthday"> <br/>
    <!--email类型会在你输入时关联你之前在浏览器中输入过的邮箱，用于补全；
    同时在提交数据时会对邮箱的格式进行简单的校验，如必须符合邮箱格式 xxx@xx.xx-->
    邮箱：<input type="email" name="email"> <br/>
    <!--number类型用于输入数字，可以设置min和max属性，用于设置数字的最小值和最大值-->
    年龄：<input type="number" name="age"> <br/>
    颜色：<input type="color" name="color"> <br/>
    <button type="submit">提交</button>
</form>
</body>
</html>